<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script type="text/javascript">
  // 属性
  // crossorigin: 'anonymous' | 'use-credentials'
  // 对于protocol、domain、port有任何一个不同的情况，有的静态资源的下载需要凭据
  // anonymous请求时，不携带cookie;use-credentials指定携带凭据，包括：cookie
  // TSL证书、Http Authorization
  // integrity: 散列算法:Base64(散列算法(内容))
  // 如果引用的CDN资源被恶意篡改了，那么可以通过integrity来避免这种安全问题，当浏览器
  // 拿到该值的时候，当下载完资源首先会对资源做相同的算法对比，如果对比不上，则抛出错误
  // 不会执行被篡改的脚本
  // src: 资源的引用地址。如果同时存在src地址和行内代码，行内代码将不会被执行
  // type: module | text/javascript
  // module: 相当于默认添加了defer属性，ES模块加载
  // nomodule: 如果浏览器支持type = module，这个元素将没什么实际意义；如果浏览器
  // 不支持type = module，将执行nomodule的脚本，这对判断浏览器是否支持type = module
  // 非常有帮助
  // charset
  // language
  // async: 遇到该属性的script、img、video、link、audio时，在不阻塞DOM解析
  // 的同时，下载资源，当下载完资源时，不论DOM的解析出于什么状态，都立即执行
  // defer: 遇到该属性的script、img、video、link、audio时，在不阻塞DOM解析
  // 的同时，下载资源，即使资源下载完了，也要等到DOM解析完成，DOMContentLoad事件之前
  // 执行脚本

  // <no-script></no-script>不支持js的浏览器会执行代码

  // 动态加载脚本
  // createElement，相当于为元素添加了sync属性，虽然createElement所有浏览器
  // 都支持，但是async不一定，所以可以
  // const script = document.createElement('script');
  // script.src = 'xxx.js';
  // script.sync = false;
  // document.head.appendChild(script);
  // 但是这样会带来性能的影响，浏览器的预加载器并不知道，可以对这些动态加载的资源
  // 让预加载器可见
  // <link rel="preload" href="xxx.js">

  // XHTML是可扩展的超文本标记语言，将HTML作为XML的应用重新包装的结果。与HTML不同
  // 使用script标签必须指明type = "text/javascript"
  // XHTML解析<符号，会解析为一个标签的开始
  // 解决方式 将<符号转换为&lt;
  // 另一种方式就是把所有代码都包含到CDATA块中
  //<![CDATA[
  //  function compare(a, b) {
  //    if (a < b) {
  //      console.log('A is less than B');
  //    } else if (a > b) {
  //      console.log('A is greater than B');
  //    } else {
  //      console.log('A is equal to B');
  //    }
  //  }
  //]]>
  // 在兼容XHTML的浏览器中，这样能解决问题。但在不支持CDATA块的非XHTML兼容
  // 浏览器中则不行，为此，CDATA标记必须使用JS注释来抵消
  /*
   //<![CDATA[
      function compare(a, b) {
      if (a < b) {
        console.log('A is less than B');
      } else if (a > b) {
        console.log('A is greater than B');
      } else {
        console.log('A is equal to B');
      }
   //]]>
  */
  // 对于不支持js的浏览器来说，如何让script标签在页面不展示，通过注释标签的形式
  // 注释代码
  /*
   *   <script><!--
          function sayHi() {
            console.log(hi)
          }
   *   //--><\/script>
  */
  // 行内代码和外部文件
  // 可维护性、缓存、适应未来

  // 文档模式？？？
</script>

</html>